<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>boostrap-框架-综合案例</title>
	<!-- 1 引入它的css -->
	<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css" />
	<!-- 引入进度条 样式文件 -->
	<link rel="stylesheet" href="./lib/Nprogress/Nprogress.css" />
	<!-- 引入 提示框 样式文件 -->
	<link rel="stylesheet" href="./lib/toastr/toastr.css" />
</head>

<body>
	<div class="container">
		<!-- 1 输入框和按钮 -->
		<div class="input-group">
			<input id="searchBookName" type="text" class="form-control" placeholder="请输入要寻找的书名" />
			<span class="input-group-btn">
				<button id="searchBtn" class="btn btn-default" type="button">
					搜索
				</button>
				<button id="showAddModal" class="btn btn-success" type="button">
					新增
				</button>
			</span>
		</div>

		<hr />

		<!-- 2 列表 -->
		<table class="table table-bordered table-striped">
			<thead>
				<th>id</th>
				<th>书名</th>
				<th>作者</th>
				<th>出版社</th>
				<th>操作</th>
			</thead>
			<tbody></tbody>
		</table>
	</div>

	<!-- 新增 模态框 -->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">新增</h4>
				</div>
				<div class="modal-body">
					<!-- 关闭历史输入信息 -->
					<!-- <form id="addForm" autocomplete="on" > -->
					<form id="addForm" autocomplete="off">
						<div class="form-group">
							<label for="bookname">书名</label>
							<input type="text" class="form-control" name="bookname" placeholder="书名" />
						</div>
						<div class="form-group">
							<label for="author">作者</label>
							<input type="text" class="form-control" name="author" placeholder="作者" />
						</div>
						<div class="form-group">
							<label for="publisher">出版社</label>
							<input type="text" class="form-control" name="publisher" placeholder="出版社" />
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button form="addForm" type="reset" class="btn btn-default">
						重置
					</button>
					<button form="addForm" type="submit" class="btn btn-primary">
						提交
					</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 新增 模态框 -->

	<!-- 编辑 模态框 -->
	<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">编辑</h4>
				</div>
				<div class="modal-body">
					<!-- 关闭历史输入信息 -->
					<form id="editForm" autocomplete="off">
						<input type="hidden" name="id" />
						<div class="form-group">
							<label for="bookname">书名</label>
							<input type="text" class="form-control" name="bookname" placeholder="书名" />
						</div>
						<div class="form-group">
							<label for="author">作者</label>
							<input type="text" class="form-control" name="author" placeholder="作者" />
						</div>
						<div class="form-group">
							<label for="publisher">出版社</label>
							<input type="text" class="form-control" name="publisher" placeholder="出版社" />
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button form="editForm" type="reset" class="btn btn-default">
						重置
					</button>
					<button form="editForm" type="submit" class="btn btn-primary">
						更新
					</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 编辑 模态框 -->

	<script src="./lib/jquery.js"></script>
	<script src="./lib/bootstrap/js/bootstrap.js"></script>
	<script src="./lib/axios.js"></script>

	<!-- 引入 toastr js -->
	<script src="./lib/toastr/toastr.js"></script>

	<!-- 进度条js -->
	<script src="./lib/Nprogress/Nprogress.js"></script>

	<!-- 引入 项目配置文件 -->
	<script src="./lib/common.js"></script>

	<script>
		const tbody = document.querySelector('tbody');
		// 新增表单
		const addForm = document.querySelector('#addForm');
		// 编辑表单
		const editForm = document.querySelector('#editForm');
		// 搜索书名的 输入框
		const searchBookName = document.querySelector('#searchBookName');
		// 搜索书名的 按钮
		const searchBtn = document.querySelector('#searchBtn');
		// 新增按钮 -  显示模态框
		const showAddModal = document.querySelector('#showAddModal');
		getData();

		// 给搜索按钮绑定点击 事件
		searchBtn.addEventListener('click', function (e) {
			getData(searchBookName.value.trim());
		});

		// 删除点击  编辑点击
		tbody.addEventListener('click', function (e) {
			if (e.target.classList.contains('deleteBtn')) {
				// console.log('删除');
				// 弹出一个确认框  js 内置的
				const ok = confirm('您确定删除吗'); //  你点击确定  ok =  true  你点击 取消 ok = false
				if (ok) {
					// 用户确定删除
					const id = e.target.dataset.id;
					// 发起删除请求 传递参数写法
					axios
						.delete('/api/delbook', { params: { id, appkey: 'dfdfs43434' } })
						.then((result) => {
							// console.log(result);
							if (result.data.status === 0) {
								// 删除成功
								getData(); // 获取最新数据

								// 提示用户
								toastr.success('删除成功');
							}
						});
				}
			} else if (e.target.classList.contains('editBtn')) {
				// 编辑业务
				$('#editModal').modal('show'); // 编辑 模态框显示
				const id = e.target.dataset.id;
				axios
					.get('/api/getbooks', { params: { appkey: 'dfdfs43434', id } })
					.then((result) => {
						// console.log(result);
						const obj = result.data.data[0]; // 获取id照应的一条数据
						// 对obj对象遍历
						for (const key in obj) {
							// 只获取了编辑表单中 input标签
							editForm.querySelector(`input[name=${key}]`).value = obj[key];
						}
					});
			}
		});

		// 新增按 用来显示新增模态框
		showAddModal.addEventListener('click', function () {
			// 显示 新增模态框
			$('#addModal').modal('show');
		});

		// 新增表单 提交事件
		addForm.addEventListener('submit', function (e) {
			e.preventDefault();
			// 快速获取表单数据  忘记添加appkey
			const data = $(addForm).serialize() + '&appkey=dfdfs43434';
			// 发送给后端 完成新增
			axios.post('/api/addbook', data).then((result) => {
				if (result.data.status === 0) {
					addForm.reset();
					$('#addModal').modal('hide');
					getData();
					// 提示用户
					toastr.success('新增成功');
				}
			});
		});

		// 编辑表单  提交事件
		editForm.addEventListener('submit', function (e) {
			e.preventDefault();
			const data = $(editForm).serialize() + '&appkey=dfdfs43434';
			axios.put('/api/updatebook', data).then((result) => {
				// console.log(result);
				if (result.data.status === 0) {
					// 修改成功

					editForm.reset();
					$('#editModal').modal('hide');
					getData();
					toastr.success('编辑成功');
				}
			});
		});
		// 发送请求获取数据渲染页面
		function getData(bookname = '') {
			let query = '';

			// 判断用户有没有传递参数
			if (bookname) {
				query = `&bookname=` + bookname;
			}
			axios({
				url: '/api/getbooks?appkey=dfdfs43434' + query,
				method: 'get',
			}).then((result) => {
				console.log(result);
				if (result.data.status === 0) {
					// 开始获取数据 生成html
					const html = result.data.data.reduce(
						(h, v) =>
							h +
							`
            <tr>
                <td>${v.id}</td>
                <td>${v.bookname}</td>
                <td>${v.author}</td>
                <td>${v.publisher}</td>
                <td>
                  <button class="btn btn-danger deleteBtn " data-id="${v.id}">删除</button>
                  <button class="btn btn-info editBtn " data-id="${v.id}">编辑</button>
                </td>
              </tr>
            
            `,
						''
					);

					tbody.innerHTML = html;
				} else {
					console.log('出错');
				}
			});
		}
	</script>
</body>

</html>